<template>
  <div id="app">
    <GlobalNav :shortname="user.username"></GlobalNav>
    <router-view></router-view>
  </div>
</template>

<script>
import GlobalNav from '@/components/sys/GlobalNav';
import {
  mapActions,
  mapState,
} from 'vuex';
import cookie from '../server/cookie';

export default {
  name: 'app',
  components: {
    GlobalNav,
  },
  mounted() {
    const token = cookie.getCookie('sessionToken');
    this.getUser(token).catch(() => {
      location.href = './login.html';
    });
  },
  methods: {
    ...mapActions(['getUser']),
  },
  computed: {
    ...mapState({
      fullscreenLoading: state => state.sys.fullscreenLoading,
      user: state => state.user.info,
    }),
  },
};
</script>

<style lang="less">
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#app {
  overflow-x: hidden;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
  width: 100%;
}

[class^="el-icon-fa"],
[class*=" el-icon-fa"] {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome!important;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@import url("../../node_modules/font-awesome/less/font-awesome");
@fa-css-prefix: el-icon-fa;
</style>
